<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
    <script src="jquery/jquery.js"></script>
    <script src="bootstrap/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container">
        <!-- 模态框 -->
        <button class="btn btn-primary" data-toggle="modal" 
        data-target="#my_modal">显示模态框</button>
        <div class="modal fade" id="my_modal" >
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">模态框头部</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-boddy">模态框内容</div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" data-dismiss="modal" aria-label="Close">关闭
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 媒体对象组件 -->
        <!-- align-self-center 媒体对象的中间对齐 -->
        <!-- align-self-end 底部对齐 -->
        <div class="media">
            <div class="media-body">
              <h5 class="mt-0">Media heading</h5>
              Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
            </div>
            <img src="imgs/1.png" class="mr-3 align-self-center" alt="..." style="width: 60px;">  
        </div>
        <!-- 列表组 -->
        <ul class="list-group">
            <li class="list-group-item">信息工程系</li>
            <li class="list-group-item active">信息工程系</li>
            <li class="list-group-item">信息工程系</li>
            <li class="list-group-item disabled">信息工程系</li>
        </ul>
        <!-- list-group-item-action 鼠标悬停背景浅灰色 -->
        <div class="list-group">
            <a href="#" class="list-group-item list-group-item-success">信息工程系</a>
            <a href="#" class="list-group-item list-group-item-action active">信息工程系</a>
            <a href="#" class="list-group-item list-group-item-action">信息工程系</a>
            <a href="#" class="list-group-item list-group-item-action disabled">信息工程系</a>
        </div>
        <!-- 卡片 -->
        <div class="card mt-3">
            <!-- <div class="card-header bg-info text-white">卡片头部</div> -->
            <div class="card-body card-img-overlay  text-center">
                <h3 class="card-title">简单的卡片</h3>
                <p class="card-text">这是卡片的正文</p>
                <a href="#" class="card-link">四川信息职业技术学院</a>
            </div>
            <img class="card-img-bottom" src="imgs/1.jpg" style="width: 100%;"/>
           
            <!-- <div class="card-footer">卡片底部</div> -->
        </div>

    </div>
</body>
</html>